<script>
export default {
  name: "keyboardModifiers",

  data() { //data要写成函数的形式  作用：实现数据隔离，互不影响
    return {
      val: '',
    }
  },
  methods: {
    modified() {
      console.log('修饰符')
    }
  }
}
</script>

<template>
  <div>键盘修饰符
    <!--  监听所有按键：v-on:keyup-->
    <input type="text" v-model="val" @keyup="modified">
    <!--  监听指定按键：v-on:keyup.按键码  按键码为keyCode-->
    <input type="text" v-model="val" @keyup.13="modified">
    <!--  使用按键别名：v-on:keyup.按键别名-->
    <input type="text" v-model="val" @keyup.enter="modified">
    <!--  自定义按键别名 在main.js中添加 Vue.config.keyCodes.指定按键 = 按键码-->
    <input type="text" v-model="val" @keyup.f1="modified">

  </div>
</template>

<style scoped lang="less">

</style>